<template>
  <div class="home">
    <main-header></main-header>
    <div class="wrap">
      <search-input></search-input>
      <main-nav></main-nav>
      <section id="show" class="f-sb-s">
        <div id="carousel">
          <el-carousel id="hot" :interval="5000" type="card" arrow="always">
            <el-carousel-item v-for="(item, ind) in hots" :key="ind">
              <div class="label-box">
                <span class="label">HOT {{ ind + 1 }}</span>
                {{ ind }}
              </div>
              <router-link :to="'/goodsDetail/' + item.id">
                <img :src="item.imgs" />
              </router-link>
            </el-carousel-item>
          </el-carousel>
          <el-carousel id="new" :interval="5000" height="160px" arrow="always">
            <el-carousel-item v-for="(arr, index) in news" :key="index">
              <ul class="f-sb-s">
                <li v-for="(ite, ind) in arr" :key="ind">
                  <div class="label-box">
                    <span class="label">
                      NEW {{ index * 4 + ind + index + 1 }}
                    </span>
                  </div>
                  <router-link :to="'/goodsDetail/' + ite.id">
                    <img :src="ite.imgs" />
                  </router-link>
                </li>
              </ul>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div id="user" class="f-fs-c-c">
          <router-link to="/personalCenter"
            ><el-avatar :size="120" :src="userInfo.avatar"></el-avatar
          ></router-link>
          <div v-if="$store.state.hasLogin">
            <div class="text">
              欢迎您，<router-link to="/personalCenter" class="b">{{
                userInfo.nickname
              }}</router-link>
            </div>
            <div class="f-c-c">
              <el-button size="mini" type="primary" @click="out"
                >退出登录</el-button
              >
            </div>
          </div>
          <div v-else>
            <div class="text">Hi，你还没有登录哟~</div>
            <div>
              <el-button
                size="mini"
                type="primary"
                @click="$router.push('/login/psd')"
                >立即登录</el-button
              >
              <el-button
                size="mini"
                type="primary"
                @click="$router.push('/regist')"
                >免费注册</el-button
              >
            </div>
          </div>
          <div id="goods" class="f-sa-c">
            <div @click="toPersonalCenter('waitPay')" class="f-c-c-c box">
              <b>{{ userInfo.waitPay }}</b>
              <span>待付款</span>
            </div>
            <div @click="toPersonalCenter('waitSend')" class="f-c-c-c box">
              <b>{{ userInfo.waitSend }}</b>
              <span>待发货</span>
            </div>
            <div @click="toPersonalCenter('waitGet')" class="f-c-c-c box">
              <b>{{ userInfo.waitGet }}</b>
              <span>待收货</span>
            </div>
            <div @click="toPersonalCenter('waitComment')" class="f-c-c-c box">
              <b>{{ userInfo.waitComment }}</b>
              <span>待评价</span>
            </div>
          </div>
          <el-divider></el-divider>
          <div id="weals" class="f-sa-fs">
            <div class="box" v-for="(item, ind) in 3" :key="ind">
              福利{{ ind + 1 }}
            </div>
          </div>
        </div>
      </section>
      <goods-brand
        v-for="(item, ind) in $store.state.brands"
        :key="ind"
        :brand="item"
      ></goods-brand>
    </div>
  </div>
</template>
<script>
import MainHeader from "../components/section/MainHeader.vue";
import SearchInput from "../components/side/SearchInput.vue";
import MainNav from "../components/section/MainNav.vue";
import GoodsBrand from "../components/section/GoodsBrand.vue";
import { out } from "../assets/api/user.js";
import { getNewestGoods, getHotestGoods } from "../assets/api/goods.js";
import { Cookie } from "../../public/js/utility.js";
export default {
  name: "home",
  components: {
    MainHeader,
    SearchInput,
    MainNav,
    GoodsBrand,
  },
  data() {
    return {
      hots: [],
      news: [],
    };
  },
  methods: {
    async init() {
      this.hots = await getHotestGoods();
      this.news = await getNewestGoods();
      console.log(this.hots, this.news);
    },
    login() {},
    regist() {},
    toPersonalCenter(type) {
      this.$router.push(`/personalCenter/${type}`);
    },
    async out() {
      let end = await out({ id: this.userInfo.id });
      this.$store.commit("save", { path: "hasLogin", data: false });
      this.$store.commit("save", {
        path: "userInfo",
        data: JSON.parse(localStorage.getItem("userInfo")),
      });
      new Cookie().delete("tel");
    },
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  created() {},
  mounted() {
    this.init();
    console.log("userInfo", this.$store.state.userInfo);
  },
};
</script>
<style lang="scss" scoped>
#show {
  margin: 20px 0 50px;
}
#carousel {
  width: 830px;
  .el-carousel__item {
    border-radius: $border-radius-base;
    overflow: hidden;
    background: $background-color-darker;
  }
  img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
  }
  .label-box {
    position: relative;
    .label {
      color: #fff;
      position: absolute;
      left: 0;
      top: 0;
      padding: 2px 5px;
      border-radius: $border-radius-small;
      font: {
        size: 12px;
        weight: bold;
      }
    }
  }
  #hot .label {
    background: $hot-color;
  }
  #new {
    .label {
      background: $new-color;
    }
    ul {
      height: 100%;
      width: 100%;
      li {
        position: relative;
        height: 100%;
        width: 165px;
        background: $background-color-darker;
      }
    }
  }
}
#user {
  width: 360px;
  border-radius: $border-radius-base;
  background: $background-color-base;
  .el-avatar {
    margin: 20px 0 10px;
  }
  .text {
    font-size: 18px;
    line-height: 2.5em;
  }
}
#goods {
  margin: 20px 0 5px;
  width: 100%;
  .box {
    cursor: pointer;
    &:hover {
      span {
        color: #000;
      }
    }
    b {
      color: $theme-color;
      font: {
        size: 26px;
      }
    }
    span {
      color: $color-text-secondary;
      font: {
        size: 14px;
      }
    }
  }
}
#weals {
  width: 100%;
  .box {
    height: 120px;
    width: 104px;
    background: #fff;
    border-radius: $border-radius-small;
  }
}
</style>
